﻿
<script src="<?php echo base_url();?>scripts/jquery-1.11.1.min.js"></script> 
<script>
	$(document).ready(function(){
		$(".menu-top a").click(function(){
	
			if($(this).next().css( 'display')=='none')
				$(this).next().css( 'display','block');
				else
				$(this).next().css( 'display','none');
				
			
		
			
		
		});
	
	
	});
</script>
<div class="menu">
	<div class="menu-left">
		<ul>
			<li class="menu-top">
				<a href="#"> link</a>
				<ul>
				
					<li>
						<a href="#"> trang chủ 1</a>
					</li>
					<li>
						<a href="#"> trang chủ 2</a>
					</li>
					<li>
						<a href="#"> trang chủ 3</a>
					</li>
					<li>
						<a href="#"> trang chủ 4</a>
					</li>
					<li>
						<a href="#"> trang chủ 5</a>
					</li>
					
					<li>
						<a href="#">trang chủ 6</a> 
					</li>
				</ul>
			
			</li>
			<li class="menu-top">
				<a href="#"> link</a>
				<ul>
					
					<li>
						<a href="#"> trang chủ 1</a>
					</li>
					<li>
						<a href="#"> trang chủ 2</a>
					</li>
					<li>
						<a href="#"> trang chủ 3</a>
					</li>
					<li>
						<a href="#"> trang chủ 4</a>
					</li>
					<li>
						<a href="#"> trang chủ 5</a>
					</li>
					
					<li>
						<a href="#">trang chủ 6</a> 
					</li>
				</ul>
			</li>
		
			
		</ul>
	
	
	</div>
</div>

<style>
.menu
{
	width:220px;
	float:left;
	height:auto;
	position:relative;
}
.menu-left
{
	width:100%;
	height:auto;
	position:relative;
	
	
}
.menu-top ul
{
	display:none;
	margin-left:-39px;
	
}
.menu-top ul li
{
	list-style:none;
	
}
</style>